<template>
  <div class="page-done">
    <div class="sticky-bar">
      <a class="done" @click="done">完成</a>
    </div>
    <div class="status-info fxv-center">
      <div class="status-img">
        <img src="~assets/img/ic_success.png">
      </div>
      <p class="text">转账成功</p>
      <p class="amount">{{status.amount}} {{status.currency_code}}</p>
    </div>
    <div class="list-item">
      <div class="item">
        <div class="left">订单信息</div>
        <div class="right">{{status.remark}}</div>
      </div>
      <div class="item">
        <div class="left">收款放</div>
        <div class="right">{{status.recver_info.nickname}}</div>
      </div>
      <div class="item">
        <div class="left">付款方式</div>
        <div class="right">乐钱包</div>
      </div>
      <div class="item">
        <div class="left">资金扣款组合</div>
        <div class="right">
          <span v-for="(group,index) in status.group" :key="index">
            {{index != 0 ? '+' : ''}} {{group.amount}} {{group.currency_code}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  validate({store,redirect}){
    let flag = !!store.state.accept.status && !!store.state.accept.userInfo && !!store.state.accept.form;
    if(!flag){
      redirect('/accept')
    }
    return true;
  },
  asyncData({store}){
    return {
      status: store.state.accept.status,
      form: store.state.accept.form,
      userInfo: store.state.accept.userInfo
    }
  },
  destroyed(){ // 离开页面后销毁转账流程数据
    //清除转账流程状态
    this.$store.dispatch('accept/clear');
  },
  methods:{
    done(){
      this.$router.push('/')
    }
  }
}
</script>

<style lang="less" scoped>
.sticky-bar {
  position:sticky;
  top:0;
  width:100%;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color:#fff;
  .done {
    align-content: flex-end;
    padding:0 30px;
    font-size:30px;
    color:@color-primary;
  }
}
.status-info {
  padding:30px;
  background-color: #fff;
  font-size:30px;
  color:#292929;


  .text,.amount {
    max-width: 100%;
    .text-ellipsis();
    margin-top:20px;
  }
}
.status-img {
  width:110px;
  height:110px;
  img {
    display: block;
    width:100%;
    height:100%;
  }
}
</style>
